<template>
  <div class="wrap">
    <canvas id="renderCanvas"></canvas>
  </div>
</template>

<script>
import * as BABYLON from "babylonjs"; //全部引入
export default {
  name: "groudCom",
  data() {
    return {
      light1: null,
      light2: null,
      sphere: null,
      engine: null,
      canvas: null
    };
  },
  props: {
    msg: String
  },
  methods: {
    /******* Add the create scene function ******/
    createScene() {
      // 创建一个场景scene
      var scene = new BABYLON.Scene(this.engine);

      // 添加一个相机，并绑定鼠标事件
      var camera = new BABYLON.ArcRotateCamera(
        "Camera",
        -Math.PI / 2,
        0.8,
        100,
        new BABYLON.Vector3(0, 0, 0),
        scene
      );
      camera.lowerBetaLimit = 0.1;
      camera.upperBetaLimit = (Math.PI / 2) * 0.9;
      camera.lowerRadiusLimit = 30;
      camera.upperRadiusLimit = 150;
      camera.attachControl(this.canvas, true);

      // 添加一组灯光到场景
      this.light1 = new BABYLON.HemisphericLight(
        "light1",
        new BABYLON.Vector3(1, 1, 0),
        scene
      );
      this.light2 = new BABYLON.PointLight(
        "light2",
        new BABYLON.Vector3(0, -10, -1),
        scene
      );
      // Light
      var spot = new BABYLON.PointLight(
        "spot",
        new BABYLON.Vector3(0, 30, 10),
        scene
      );
      spot.diffuse = new BABYLON.Color3(1, 1, 1);
      spot.specular = new BABYLON.Color3(0, 0, 0);

      // 添加个box到场景中
      // var box1 = BABYLON.Mesh.CreateBox("Box1", 10.0, scene);
      // box1.position.x = -20;
      // 相机由近到远动画
      var animationBox = new BABYLON.Animation(
        "myAnimation",
        "radius",
        30,
        BABYLON.Animation.ANIMATIONTYPE_FLOAT,
        BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
      );
      // 相机alpha角度变化
      var animationCamA = new BABYLON.Animation(
        "myAnimation2",
        "alpha",
        30,
        BABYLON.Animation.ANIMATIONTYPE_FLOAT,
        BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
      );
      // 相机beta角度变化
      var animationCamB = new BABYLON.Animation(
        "myAnimation2",
        "beta",
        30,
        BABYLON.Animation.ANIMATIONTYPE_FLOAT,
        BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
      );
      // An array with all animation keys
      var keys = [];
      var keys2 = [];
      var keys3 = [];

      // 镜头半径变化
      keys.push({
        frame: 0,
        value: 5
      });

      keys.push({
        frame: 80,
        value: 20
      });

      keys.push({
        frame: 100,
        value: 100
      });

      // 镜头alpha角度关键帧变化
      keys2.push({
        frame: 0,
        value: -Math.PI
      });

      keys2.push({
        frame: 80,
        value: -Math.PI / 8
      });

      keys2.push({
        frame: 100,
        value: -Math.PI / 2
      });

      // 镜头beta角度变化
      keys3.push({
        frame: 0,
        value: 1.5
      });
      
      keys3.push({
        frame: 80,
        value: 1.5
      });
      keys3.push({
        frame: 100,
        value: 0.8
      });

      animationBox.setKeys(keys);

      animationCamA.setKeys(keys2);

      animationCamB.setKeys(keys3);

      camera.animations = [];
      camera.animations.push(animationBox);
      camera.animations.push(animationCamA);
      camera.animations.push(animationCamB);

      scene.beginAnimation(camera, 0, 100, true);

      // 添加一个球体到场景中
      // this.sphere = BABYLON.MeshBuilder.CreateSphere(
      //   "sphere",
      //   { diameter: 2 },
      //   scene
      // );
      // 添加土地
      var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
      groundMaterial.diffuseTexture = new BABYLON.Texture(
        "static/images/earth.jpg",
        scene
      );

      // var groundPlane = BABYLON.Mesh.CreatePlane("groundPlane", 200.0, scene);
      // groundPlane.material = groundMaterial;

      var ground = BABYLON.Mesh.CreateGroundFromHeightMap(
        "ground",
        "static/images/worldHeightMap.jpg",
        200,
        100,
        250,
        0,
        10,
        scene,
        false
      );
      ground.material = groundMaterial;

      return scene;
    }
  },
  mounted() {
    this.canvas = document.getElementById("renderCanvas"); // 得到canvas对象的引用
    this.engine = new BABYLON.Engine(this.canvas, true); // 初始化 BABYLON 3D engine

    /******* End of the create scene function ******/

    this.scene = this.createScene(); //Call the createScene function

    // 最后一步调用engine的runRenderLoop方案，执行scene.render()，让我们的3d场景渲染起来
    this.engine.runRenderLoop(() => {
      this.scene.render();
    });

    // 监听浏览器改变大小的事件，通过调用engine.resize()来自适应窗口大小
    window.addEventListener("resize", () => {
      this.engine.resize();
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.wrap {
  height: 100vh;
  width: 100vw;

  #renderCanvas {
    height: 100%;
    width: 100%;
  }
}
</style>
